<template>
    <div>
        <el-dialog
            :title="this.$t('common.Add')"
            :visible.sync="Visible"
            width="400px"
            :close-on-click-modal="false"
            @close="cancel"
        >
            <div class="dialogBox">
                <div class="dialogBoxItem">
                    <div class="dialogBoxItemRow">
                        <div class="title">
                            <div class="RequiredRowTip">*</div>
                            {{ $t('videoManagementLang.video_name') }}:
                        </div>
                        <div class="contant">
                            <el-input
                                ref="name"
                                @blur="handleBlur('name', $event)"
                                @focus="handleFocus($event)"
                                :placeholder="$t('common.input_plactholder')"
                                v-model="data.name"
                            ></el-input>
                        </div>
                    </div>
                    <div class="dialogBoxItemRow">
                        <div class="title">
                        <div class="RequiredRowTip">*</div>
                        {{$t('videoManagementLang.video_source')}}:
                        </div>
                        <div class="contant">
                        <el-select
                            ref="video_source"
                            filterable
                            @blur="handleBlur('video_source', $event)"
                            @change="handleChang('video_source')"
                            v-model="data.video_source"
                            :placeholder="$t('common.select_plactholder')"
                        >
                            <el-option
                            v-for="item in options_source"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        </div>
                    </div>
                    <div v-if="this.data.video_source=='external'" class="dialogBoxItemRow">
                        <div class="title">
                            <div class="RequiredRowTip">*</div>
                            {{ $t('videoManagementLang.outside_video') }}:
                        </div>
                        <div class="contant">
                            <el-input
                                ref="video"
                                @blur="handleBlur('video', $event)"
                                @focus="handleFocus($event)"
                                :placeholder="$t('common.input_plactholder')"
                                v-model="data.video"
                            ></el-input>
                        </div>
                    </div>
                    <div v-else class="dialogBoxItemRow">
                        <div class="title">
                            <div class="RequiredRowTip">*</div>
                            {{ $t('videoManagementLang.local_video') }}:
                        </div>
                        <div class="contant">
                            <el-upload
                                ref="upload_file"
                                style="width: 100%"
                                class="upload-demo"
                                drag
                                action="#"
                                multiple
                                :file-list="fileList"
                                :on-change="uploadChange"
                                accept=".mp4"
                                :auto-upload="false"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">{{ $t('videoManagementLang.text_1') }}<em>{{ $t('videoManagementLang.text_2') }}</em></div>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm" size="small">{{ $t('common.confirm') }}</el-button>
                <el-button @click="cancel" size="small">{{ $t('common.cancel') }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import UploadImg from '../../components/common/upload_Img';
export default {
    components: { UploadImg },
    props: {
        // 接收绑定参数
    },
    data() {
        return {
            Visible: false,
            data: {
                name: '',
                video_source: '',
                video: '',
            },
            options_source:[],
            fileList: [],
            confirmTrue: true //确定按钮保护
        };
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {
        init(data) {
            this.getOptions()
            this.Visible = true;
        },
        //获取下拉单数据
        getOptions(){
            this.$get("getVideoSource").then((res) => {
                this.options_source = res.data;
            });
        },
        uploadChange(file, fileList) {
          this.data.video = file.raw;
          this.fileList = [file]
        },
        // 提交
        confirm() {
            //是否有空值必选项标识
            let type = true;
            //输入框判断是否有值
            if (!this.data.name) {
                this.$refs.name.$el.childNodes[1].style.border = '1px solid red';
                type = false;
            }
            if (!this.data.video_source&&this.data.video_source!==0) {
                this.$refs.position_type.$el.childNodes[1].childNodes[1].style.border =
                "1px solid red";
                type = false;
            }
            if(this.data.video_source == 'external'){
                if (!this.data.video) {
                    this.$refs.video.$el.childNodes[1].style.border = '1px solid red';
                    type = false;
                }
            }else{
                if(this.fileList.length == 0){
                    this.$message({
                        message: this.$t('videoManagementLang.video_msg'),
                        type: 'warning'
                    });
                }
            }
            if (type && this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                let params = new FormData();
                params.append('name', this.data.name);
                params.append('video_source', this.data.video_source);
                params.append('video', this.data.video);
                if(this.data.video_source == 'upload'){
                    params.append('video_name', this.fileList[0].name);
                }
                this.$postForm('addVideo', params).then((res) => {
                    this.confirmTrue = true;
                    if (res.success) {
                        this.$message.success(res.msg);
                        this.$emit('success');
                        this.cancel();
                    }
                });
            }
        },
        //取消
        cancel() {
            this.data = {
                name: '',
                video_source: '',
                video: '',
            };
            this.fileList=[]
            this.Visible = false;
            let dom = document.getElementsByClassName('el-input__inner');
            for (let i = 0; i < dom.length; i++) {
                dom[i].style.border = '1px solid #E0E3E9';
            }
        },
        //输入框、下拉框失去焦点边框变色
        handleBlur(name, event) {
            if (!this.data[name] && this.data[name] !== 0) {
                event.target.style.border = '1px solid red';
            }
        },
        //输入框、下拉框获取焦点边框变色
        handleFocus(event) {
            event.target.style.border = '1px solid #E0E3E9';
        },
        //下拉框有值后边框变色
        handleChang(data) {
            if (this.data[data].length==0) {
                this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
            }else{
                this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
            }
            this.data.video=''
            this.fileList=[]
        },
    }
};
</script>

<style scoped lang="less" >
.dialogBox .dialogBoxItem {
    flex-direction: column;
    gap: 15px;
    .dialogBoxItemRow {
        width: 100%;
    }
}
/deep/ .el-dialog__wrapper {
    .el-dialog {
        min-width: 500px;
    }
}
/deep/.el-upload-list{
    height: 30px;
    margin-top: 10px;
    .el-upload-list__item:first-child{
      margin: 0;
    }
}
</style>